// components/progress-bar/progress-bar.js
let movableAreaWidth = 0
let movableViewWidth = 0
const backgroundAudioManager = wx.getBackgroundAudioManager();
let duration = 0; //当前音乐总时长
let currentSec = -1 //当前的秒数
let isMoving = false; // 当前的进度条是否在拖拽 解决  当进度条在拖拽的时候和updateTimeUpdate冲突问题
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame:Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    showTime: {
      currentTime: '00:00',
      totalTime: '00:00'
    },
    movableDis: 0,
    progress: 0,
  },

  lifetimes: {
    ready() {
      if(this.properties.isSame && this.data.showTime.totalTime == "00:00") {
        this._setTime();
      }
      this._getMovableDis();
      this._bindBGMEvent();
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // 拖动
      if (event.detail.source == 'touch') {
        this.data.progress = event.detail.x / (movableAreaWidth - movableViewWidth) * 100;
        this.data.movableDis = event.detail.x;
        isMoving = true;
      }
    },
    onTouchEnd() {
      let currentFmt = this._dateFormat(Math.floor(backgroundAudioManager.currentTime))
      this.setData({
        progress: this.data.progress,
        movableDis: this.data.movableDis,
        ['showTime.currentTime']: currentFmt.min + ":" + currentFmt.sec
      })
      backgroundAudioManager.seek(duration * this.data.progress / 100);
      isMoving = false;
    },
    _getMovableDis() {
      const query = this.createSelectorQuery();
      query.select('.movable-area').boundingClientRect();
      query.select('.movable-view').boundingClientRect();
      query.exec((rect) => {
        movableAreaWidth = rect[0].width;
        movableViewWidth = rect[1].width;
      })
    },

    _bindBGMEvent() {
      backgroundAudioManager.onPlay(() => {
        console.log('onPlay');
        isMoving = false;
        this.triggerEvent("musicPlay")
      })

      backgroundAudioManager.onStop(() => {
        console.log('onStop')
      })

      backgroundAudioManager.onPause(() => {
        console.log('onPause');
        this.triggerEvent("musicPause")
      })

      backgroundAudioManager.onWaiting(() => {
        console.log('onWaiting')
      })

      backgroundAudioManager.onCanplay(() => {
        console.log('onCanplay')
        if (typeof backgroundAudioManager.druation != 'undefined') {
          this._setTime();
        } else {
          setTimeout(() => {
            this._setTime();
          }, 1000)
        }
      })

      backgroundAudioManager.onTimeUpdate(() => {
        if (!isMoving) {
          const currentTime = backgroundAudioManager.currentTime;
          const duration = backgroundAudioManager.duration;
          const currentTimeFmt = this._dateFormat(currentTime);
          const sec = currentTime.toString().split('.')[0]
          if (sec != currentSec) {
            this.setData({
              movableDis: (movableAreaWidth - movableViewWidth) * currentTime / duration,
              progress: currentTime / duration * 100,
              ['showTime.currentTime']: `${currentTimeFmt.min}:${currentTimeFmt.sec}`
            })
            currentSec = sec;
            // 联动歌词
            this.triggerEvent("timeUpdate",{
              currentTime
            })
          }
        }
      })

      backgroundAudioManager.onEnded(() => {
        console.log('onEnded');
        this.triggerEvent('musicEnd');
      })

      backgroundAudioManager.onError(() => {
        console.log('onError')
      })
    },
    _setTime() {
      duration = backgroundAudioManager.duration;
      const durationFmt = this._dateFormat(duration);
      this.setData({
        ['showTime.totalTime']: `${durationFmt.min}:${durationFmt.sec}`
      })
    },
    // 格式化方法
    _dateFormat(sec) {
      const min = Math.floor(sec / 60);
      sec = Math.floor(sec % 60);
      return {
        'min': this._parse0(min),
        'sec': this._parse0(sec)
      }
    },
    _parse0(sec) {
      return sec < 10 ? '0' + sec : sec;
    }
  }
})